/*
 * 校园工作室人员管理编辑
 * @Author: ice
 * @Date: 2018-10-15 14:27:22
 * @Last Modified by: ice
 * @Last Modified time: 2018-10-19 09:52:36
 */
<template>
    <div class="container edit-place-container">
        <div
            v-if="authResult.auth_save"
            class="operate-bar"
        >
            <el-button
                plain
                type="primary"
                size="mini"
                @click="fnGoList()"
            >取消</el-button>
            <el-button
                plain
                type="primary"
                size="mini"
                @click="fnClear()"
            >清空</el-button>
            <el-button
                type="primary"
                size="mini"
                @click="fnSave()"
            >保存</el-button>
        </div>
        <div
            class="base-main"
            :class="{'no-operater': !authResult.auth_base_edit}"
        >
            <el-form
                ref="mainform"
                :model="formData"
                status-icon
                :rules="formRule"
                label-width="0"
            >
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix card-header"
                    >
                        <span>基本信息</span>
                    </div>
                    <div
                        class="card-content"
                        :class="{'show-edit': true, 'uneditable-wrap': false }"
                    >
                        <div class="info-wrap">
                            <div class="info-unit">
                                <div class="info-label">
                                    姓名
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_name">
                                        <el-input
                                            placeholder="必填"
                                            v-model="formData.person_name"
                                            size="small"
                                            class="info-input"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label ">
                                    <span>所在城市</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="prov_city">
                                        <el-cascader
                                            placeholder="必填"
                                            clearable
                                            :options="regin"
                                            expand-trigger="hover"
                                            :change-on-select="false"
                                            size="small"
                                            :filterable="true"
                                            class="info-input"
                                            :props="{
                                                label: 'name',
                                                value: 'id',
                                                children: 'children'
                                            }"
                                            v-model="formData.prov_city"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    费用
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_fee">
                                        <el-input
                                            placeholder="必填"
                                            v-model="formData.person_fee"
                                            type="number"
                                            size="small"
                                            class="info-input"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    年龄
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_age">
                                        <el-input
                                            placeholder="选填"
                                            v-model="formData.person_age"
                                            type="number"
                                            size="small"
                                            class="info-input"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    <span>性别</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_sex">
                                        <el-select
                                            size="small"
                                            v-model="formData.person_sex"
                                            filterable
                                            class="info-input"
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                label="男"
                                                value="男"
                                            />
                                            <el-option
                                                label="女"
                                                value="女"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    <span>职业</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_job">
                                        <el-select
                                            size="small"
                                            class="info-input"
                                            v-model="formData.person_job"
                                            filterable
                                            allow-create
                                            default-first-option
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                v-for="item in pjobList"
                                                :key="item.nam "
                                                :label="item.name"
                                                :value="item.name"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    <span>职能</span>
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_function">
                                        <el-select
                                            size="small"
                                            class="info-input"
                                            v-model="formData.person_function"
                                            filterable
                                            allow-create
                                            default-first-option
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                v-for="item in pfunctionList"
                                                :key="item.nam "
                                                :label="item.name"
                                                :value="item.name"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix card-header"
                    >
                        <span>联系方式</span>
                    </div>
                    <div
                        class="card-content"
                        :class="{'show-edit': true, 'uneditable-wrap': false }"
                    >
                        <div class="info-wrap">
                            <div class="info-unit">
                                <div class="info-label">
                                    手机
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_phone">
                                        <el-input
                                            :disabled="!authResult.auth_phone_show"
                                            placeholder="必填"
                                            v-model="formData.person_phone"
                                            size="small"
                                            class="info-input"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    微信
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_weixin">
                                        <el-input
                                            :disabled="!authResult.auth_weixin_show"
                                            placeholder="选填"
                                            v-model="formData.person_weixin"
                                            size="small"
                                            class="info-input"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">
                                    QQ
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_qq">
                                        <el-input
                                            :disabled="!authResult.auth_qq_show"
                                            placeholder="选填"
                                            v-model="formData.person_qq"
                                            size="small"
                                            class="info-input"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix card-header"
                    >
                        <span>其他信息</span>
                    </div>
                    <div
                        class="card-content"
                        :class="{'show-edit': true, 'uneditable-wrap': false }"
                    >
                        <div class="info-wrap">
                            <div class="info-unit full-unit">
                                <div class="info-label">
                                    备注
                                </div>
                                <div class="info-value">
                                    <el-form-item prop="person_remark">
                                        <el-input
                                            :disabled="!authResult.auth_remark_show"
                                            placeholder="选填"
                                            v-model="formData.person_remark"
                                            type="textarea"
                                            size="small"
                                            resize="none"
                                            :autosize="{ minRows: 1, maxRows: 12}"
                                            class="info-input"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                        <div class="pic-list">
                            <el-form-item prop="person_photos">
                                <div class="pic-unit">
                                    <div class="pic-label">图片</div>
                                    <div
                                        class="pic-value"
                                        v-for="(item, index) in uploadPreview"
                                        :key="index"
                                        :style="'background-image: url('+item.url+')'"
                                    >
                                        <div
                                            class="loading"
                                            v-if="item.status=='uploading'"
                                        >
                                            <el-icon name="loading" />
                                        </div>
                                        <div class="cover">
                                            <el-icon
                                                name="delete"
                                                @click.native="()=>{uploadPreview.splice(index, 1);}"
                                            />
                                        </div>
                                    </div>
                                    <el-upload
                                        :multiple="true"
                                        v-if="init"
                                        class="edit-upload-wrapper"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :http-request="fnUpload"
                                        list-type="picture-card"
                                        accept="image/*"
                                        :file-list="uploadPreview"
                                        :show-file-list="false"
                                        :on-success="fnUploadSuccess"
                                        :on-change="fnUploadChange"
                                    >

                                        <div class="pic-value pic-empty">
                                            <div class="pic-empty-container">
                                                <div class="pic-empty-img" />
                                                <div class="pic-empty-desc">+添加图片</div>
                                            </div>
                                        </div>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                </el-card>
            </el-form>
        </div>
    </div>
</template>

<script>
import regin from '@/assets/js/regin.min.js';
import inputRange from '@/components/common/input-range';
export default {
    components: { inputRange },
    data() {
        let checkPhone = (rule, value, callback) => {
            let reg = /^1\d{10}$/;

            if (reg.test(value)) {
                this.errMsgPhone = '';
                return callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
            }
        };
        let checkProvCity = (rule, value, callback) => {
            if (!value || value.length < 2 || !value[0] || !value[1]) {
                return callback(new Error(rule.message));
            }
            return callback();
        };

        return {
            authResult: {},
            breadcrumbList: [
                {
                    title: "校园工作室管理",
                },
                {
                    title: "人员管理",
                    name: 'PersonList',
                },
                {
                    title: '新增人员'
                }
            ],
            regin: [],
            // 职能
            pfunctionList: [{
                name: '主持人'
            }, {
                name: '工作人员'
            }, {
                name: '现场督导'
            }, {
                name: '歌手'
            }, {
                name: '舞蹈/coser/礼仪'
            }, {
                name: '专业观众'
            }],
            // 职业
            pjobList: [{
                name: '不限'
            }, {
                name: '学生'
            }, {
                name: '主持人'
            }, {
                name: '表演者'
            }, {
                name: '其他'
            }],

            formData: {
                id: '',// 人员id, 空为添加

                person_name: '',
                prov_city: ['', ''],
                person_pid: '',
                person_cid: '',
                person_fee: '',
                person_age: '',
                person_sex: '男',
                person_job: '',
                person_function: '',
                person_phone: '',
                person_weixin: '',
                person_qq: '',
                person_remark: '',
                person_photos: ''
            },
            formRule: {
                person_name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                prov_city: [
                    { required: true, message: '请选择所在省市', trigger: 'change' },
                    { validator: checkProvCity, message: '请选择所在省市', trigger: 'change' },
                ],
                person_fee: [
                    { required: true, message: '请输入费用', trigger: 'blur' },
                ],
                person_sex: [
                    { required: true, message: '请选择性别', trigger: 'change' },
                ],
                person_job: [
                    { required: true, message: '请选择职业', trigger: 'change' },
                ],
                person_function: [
                    { required: true, message: '请选择职能', trigger: 'change' },
                ],
                person_phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkPhone, message: '请输入正确的手机号', trigger: 'blur' },
                ],
                // person_photos: [
                //     { validator: this.validateUpdatePic, message: '请上传照片', trigger: 'blur' },
                // ]
            },

            uploadPreview: [],
            init: false,
            saving: false
        };
    },
    methods: {
        validateUpdatePic(rule, value, callback) {
            // if(!this.uploadPreview || this.uploadPreview.length <= 0){
            //     return callback(new Error(rule.message));
            // }
            for (var i in this.uploadPreview) {
                if (this.uploadPreview[i].status != 'success') {
                    return callback(new Error('请等待图片上传完毕'));
                }
            }
            return callback();
        },
        /** 获取场地信息 */
        fnGetPerson() {
            if (!this.formData.id) {
                return;
            }
            this.$post('/ht/person%5Cget', {
                id: this.formData.id
            }, resp => {
                if (resp.code == 1) {
                    this.formData = {
                        id: this.formData.id,// 人员id, 空为添加

                        person_name: resp.data.person_name,
                        prov_city: [resp.data.person_pid, resp.data.person_cid],
                        person_fee: resp.data.person_fee,
                        person_age: resp.data.person_age,
                        person_sex: resp.data.person_sex,
                        person_job: resp.data.person_job,
                        person_function: resp.data.person_function,
                        person_phone: resp.data.person_phone,
                        person_weixin: resp.data.person_weixin,
                        person_qq: resp.data.person_qq,
                        person_remark: resp.data.person_remark,
                        person_photos: resp.data.person_photos
                    };
                    this.uploadPreview = [];// 人员照片
                    let pics = resp.data.person_photos ? JSON.parse(resp.data.person_photos) : [];

                    for (var i in pics) {
                        this.uploadPreview.push({
                            url: pics[i],
                            uploadUrl: pics[i]
                        });
                    }
                    setTimeout(() => {
                        this.$refs.mainform.clearValidate();
                    }, 100);
                    // 初始化标记, 初始化完成后才显示上传组件
                    this.init = true;
                } else {
                    this.$message({
                        center: true,
                        type: 'warning',
                        message: resp.msg
                    });
                    setTimeout(() => {
                        this.fnGoList();
                    }, 1000);
                }
            });
        },
        fnClear() {
            this.formData = {
                id: '',// 人员id, 空为添加

                person_name: '',
                prov_city: ['', ''],
                person_fee: '',
                person_age: '',
                person_sex: '男',
                person_job: '',
                person_function: '',
                person_phone: '',
                person_weixin: '',
                person_qq: '',
                person_remark: '',
                person_photos: ''
            };
            this.uploadPreview = [];// 场地图片
            this.$refs['mainform'].resetFields();
        },
        /** 保存表单 */
        fnSave() {
            if (this.saving) {
                return;
            }
            let imgTmp = [];

            for (var i in this.uploadPreview) {
                if (this.uploadPreview[i].status != 'success') {
                    this.$message({
                        type: 'warning',
                        center: true,
                        message: '请等待图片上传完毕'
                    });
                    return;
                }
                imgTmp.push(this.uploadPreview[i].uploadUrl);
            }


            this.$refs['mainform'].validate(valid => {
                if (!valid) {
                    return;
                }
                this.formData.person_photos = JSON.stringify(imgTmp);
                this.formData.person_pid = this.formData.prov_city[0];
                this.formData.person_cid = this.formData.prov_city[1];
                this.saving = true;
                this.$post('/ht/person%5Csave', this.formData, resp => {
                    this.$message({
                        type: 'success',
                        center: true,
                        message: '保存成功'
                    });
                    this.fnGoList();
                });
            });
        },
        /** 上传组件回调 文件队列修改 */
        fnUploadChange(file, fileList) {
            this.uploadPreview = fileList;
        },
        /** 上传组件回调 上传成功 */
        fnUploadSuccess(resp, file, fileList) {
            file.uploadUrl = resp.url;
        },
        fnUpload(e) {
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                progress: e.onProgress,
                success: resp => {
                    if (resp.code == 1) {
                        // 调用组件成功回调,修改样式
                        e.onSuccess(resp.data, {
                            url: resp.data.url
                        }, this.fileList);
                    } else {
                        // 失败后调用组件error回调,删除对应元素
                        e.onError(resp.msg);
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                    }
                }
            });
        },
        fnGoList() {
            this.$router.push({
                name: 'PersonList'
            });
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        // 如果没有编辑手机号的权限,则无需验证手机号
        if (!this.authResult.auth_phone_show) {
            this.$set(this.formRule, 'person_phone', []);
        }
        regin.splice(0, 1);
        this.regin = regin;
        this.formData.id = this.$route.query.id ? this.$route.query.id : '';

        if (this.formData.id) {
            this.$set(this.breadcrumbList, 2, {
                title: '编辑人员信息'
            });
        }
        this.$store.commit('SET_HEADER', this.breadcrumbList);

        if (this.formData.id) {
            this.fnGetPerson();
        } else {
            // 初始化标记, 初始化完成后才显示上传组件
            this.init = true;
        }
    },
    mounted() {
    }
};

</script>

<style lang="less" scoped>
    .btn-nopadding {
      padding: 0;
    }
    .container {
      display: flex;
      flex-direction: column;
    }
    .details-base-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .operate-bar {
      position: relative;
      text-align: right;
      padding: 12px 20px;
      background: #fff;
      box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
      z-index: 1;
    }
    .base-main {
      width: 100%;

      height: calc(100% - 56px);
      padding: 15px;
      overflow: auto;
      box-sizing: border-box;
      &.no-operater {
        height: calc(100%);
      }
    }
    .box-card {
      margin-bottom: 26px;
    }
    .card-header span {
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    .info {
      &-unit {
        width: 33%;
        text-align: left;
        min-width: 300px;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 0;
      }
      &-unit:nth-child(3n) {
        padding-left: 8%;
      }
      &-unit:nth-child(3n + 1) {
        padding-right: 8%;
      }
      &-unit:nth-child(3n + 2) {
        padding-left: 4%;
        padding-right: 4%;
      }
      &-label {
        margin-bottom: 5px;
        width: 100%;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      &-value {
        width: 100%;
        flex: 1;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.75);
        line-height: 22px;
      }
      &-input {
        width: 100%;
      }

      &-wrap {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        min-width: 900px;
        .full-unit {
          width: 100%;
          padding: 0;
          padding-right: 1%;
        }
      }
    }
    .pic {
      &-list {
        width: 100%;
      }
      &-unit {
        position: relative;
        margin-bottom: 12px;
        .edit-upload-wrapper {
          display: inline-block;
          vertical-align: top;
          width: 240px;
          height: 165px;
          .el-upload--picture-card {
            width: 240px;
            height: 185px;
          }
        }
      }
      &-label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      &-value {
        display: inline-block;
        width: 240px;
        height: 165px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 12px;
        width: 240px;
        height: 165px;
        margin-right: 40px;
        border: 1px solid rgba(51, 120, 222, 0.21);
        position: relative;
        &:hover {
          .cover {
            opacity: 1;
          }
          .loading {
            opacity: 0;
          }
        }
        .cover {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.8);
          opacity: 0;
          transition: all 0.5s;

          .el-icon-delete {
            cursor: pointer;
            font-size: 26px;
            color: #fff;
            line-height: 165px;
          }
        }
        .loading {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.8);
          opacity: 1;
          transition: all 0.5s;

          .el-icon-loading {
            font-size: 26px;
            color: #fff;
            line-height: 165px;
          }
        }
      }
      &-empty {
        position: relative;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(51, 120, 222, 0.21);
        &-container {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
        }
        &-img {
          width: 53px;
          height: 42px;
          margin: 0 auto;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url(//cdn.zsdx.cn/admin/images/student/pic-empty.png);
        }
        &-desc {
          margin-top: 8px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.3);
          line-height: 20px;
          text-align: center;
        }
      }
    }
    .base-view {
      display: inline;
      line-height: 22px;
    }
    .base-input {
      display: none;
      line-height: 22px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
    .show-edit {
      .base-view {
        display: none;
      }
      .base-input {
        display: inline;
      }
      .uneditable {
        opacity: 0.5;
        .base-view {
          display: inline;
        }
        .base-input {
          display: none;
        }
      }
    }
    .uneditable-wrap {
      .base-view {
        display: inline;
      }
      .base-input {
        display: none;
      }
      .info-unit {
        opacity: 0.5;
      }
    }
</style>
<style lang="less">
    .edit-place-container {
      .el-upload--picture-card {
        border: 0;
        background-color: transparent;
      }
      .el-form-item {
        margin-bottom: 16px;
      }
    }
</style>